<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>订单列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
</head>
<body class="bg-gray">
<!--<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        订单列表
    </h1>


</header>-->
<div id="myorder" v-cloak>

<section class="" id="amz-main" data-tag="css-nav" v-for="order in orderlist">

    <div class="am-g am-benj-prou">
        <div class="bg-white font-14 prelative am-listborder-shadow" v-on:click="show(order.id)">
            <div class="product-box">
                <p class="margin-bottom0"><img v-bind:src="order.offer_img"  style="width: 100%"></p>
                <div class="useritem    box am-padding-left-sm am-padding-top-sm am-padding-bottom-sm am-padding-right-sm ">
                    <div class="box-1 ">
                        <div class="font-color-2 font-16">{{order.offer_name}}</div>
                        <div class="font-color-2 font-14">￥{{order.total_price}}</div>
                        <div class="font-color-1 font-12">{{timestampToTime(order.create_time)}}</div>
                    </div>
                    <div class="font-color-main font-14 padding-top-25">{{statusFormat(order.status)}}</div>
                </div>

                </div>
            </div>

    </div>


</section>
</div>

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/vue2.2.2.min.js"></script>
<script src="../assets/common.js"></script>
<link rel="stylesheet" href="../assets/js/layui/css/layui.css">
<script type='text/javascript' src='../assets/js/layui/layui.js'></script>
<script>
    var vues;
    var islast=0;
    var recount=0;

    var totalpage;
    var page = {
        "page_num": 1,
        "page_size": 4
    }
    var sessionid=getQueryString("sessionid");
    var mask;
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    window.onscroll = function () {
        if (getScrollTop() + getWindowHeight() == getScrollHeight()) {

            nextPage();
        }

        if (getScrollTop() == 0) {
            reloadPage();
        }
    };
    $(function () {
        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            $.ajax({
                type: 'POST',
                url: baseUrl+'v3.0/Circle/Order',
                contentType: 'application/json',
                headers: {'session_id': sessionid},
                data: JSON.stringify(page),
                success: function (result) {
                    layer.close(mask);
                    totalpage=result.total_num/result.page_size
                    //注册vue
                    vues=new Vue({
                        el: "#myorder",
                        data: {
                            orderlist: result.data_list
                        },
                        methods: {
                            timestampToTime:function(timestamp){
                                timestampToTime(timestamp)
                            },
                            show:function(d){
                                window.location.href='订单详情.html?orderid='+d
                            },
                            statusFormat:function(type){
                                if (type==0)
                                    return "未支付"
                                return "已支付"
                            }
                        }

                    })
                }
            });
        },200)
        //获取用户所在企业发布的产品

    })
    //滚动条在Y轴上的滚动距离
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {
        var scrollHeight = 0,
            bodyScrollHeight = 0,
            documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }

    //下一页
    function  nextPage(){
        if (totalpage<=1){
            return;
        }
        if(islast==1){
            mask = layer.msg('最后一页了');
            setTimeout(function(){
                layer.close(mask);
            },2000)
            return;//最后一页了
        }
        mask = layer.msg('加载下一页', {icon: 16});
        page.page_num++;
        $.ajax({
            type: 'POST',
            url: baseUrl+'v3.0/Circle/Order',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            data: JSON.stringify(page),
            success: function (result) {
                if(result.total_num<result.page_size*result.page_num)
                {
                    islast=1;
                }
                for(var i in result.data_list)
                {
                    vues.orderlist.push(result.data_list[i]);

                }
                layer.close(mask);
            }
        });
    }

    function  reloadPage(){
        if (totalpage<=1){
            return;
        }
        recount++;
        if (recount==1){
            mask = layer.msg('刷新中', {icon: 16});
            page.page_num=1;
            $.ajax({
                type: 'POST',
                url: baseUrl+'v3.0/Circle/Order',
                contentType: 'application/json',
                headers: {'session_id': sessionid},
                data: JSON.stringify(page),
                success: function (result) {
                    vues.orderlist=result.data_list
                    layer.close(mask);
                    setTimeout(function () {
                        recount=0;
                        islast=0;
                    },1000)
                }
            });
        }

    }
</script>

</body>
</html>